<template>
	<view class="system-msg">
		<!-- 顶部选项卡 -->
		<view class="tabs">
			<view 
				v-for="(type, key) in msgTypes" 
				:key="key"
				:class="['tab', activeTab == key ? 'active' : '']"
				@click="switchTab(key)"
			>
				{{type}}
			</view>
		</view>
		
		<!-- 消息列表 -->
		<scroll-view 
			class="msg-list" 
			scroll-y 
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="list-content">
				<view 
					class="msg-item" 
					v-for="(item, index) in msgList" 
					:key="index"
					@click="viewDetail(item)"
				>
					<view class="item-content">
						<view class="msg-title">{{item.title}}</view>
						<!-- 富文本内容显示 -->
						<view class="msg-content" v-if="item.content">
							<u-parse 
								:content="formatContent(item.content)" 
								:lazy-load="true"
								:selectable="true"
							></u-parse>
						</view>
						<view class="msg-time">{{item.create_time_text}}</view>
					</view>
				</view>
				
				<!-- 空状态 -->
				<view v-if="msgList.length === 0 && !loading" class="empty-state">
					<u-empty mode="data" text="暂无消息"></u-empty>
				</view>
				
				<!-- 加载更多 -->
				<view v-if="hasMore" class="load-more">
					<u-loadmore status="loading" />
				</view>
				
				<!-- 没有更多了 -->
				<view v-if="!hasMore && msgList.length > 0" class="no-more">
					没有更多了
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前激活的选项卡
				activeTab: '1',
				// 消息类型
				msgTypes: {},
				// 消息列表
				msgList: [],
				// 分页参数
				page: 1,
				limit: 10,
				// 是否还有更多数据
				hasMore: true,
				// 是否正在加载
				loading: false,
				// 下拉刷新状态
				refreshing: false
			};
		},
		onLoad() {
			this.getMsgTypes();
			this.getMsgList();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		methods: {
			// 获取消息类型
			getMsgTypes() {
				this.$httpApi.getMsgTypes().then((res) => {
					if (res.code == 1) {
						this.msgTypes = res.data.msg_type || {};
						// 设置默认激活的选项卡
						const keys = Object.keys(this.msgTypes);
						if (keys.length > 0) {
							this.activeTab = keys[0];
						}
					}
				}).catch(() => {
					// 如果接口失败，使用默认数据
					this.msgTypes = {
						"1": "系统公告",
						"2": "卡品更新通知"
					};
				});
			},
			
			// 获取消息列表
			getMsgList(isLoadMore = false) {
				if (this.loading) return;
				
				this.loading = true;
				const params = {
					msg_type: this.activeTab,
					page: this.page,
					limit: this.limit
				};
				
				this.$httpApi.getMsgList(params).then((res) => {
					this.loading = false;
					this.refreshing = false;
					uni.stopPullDownRefresh();
					
					if (res.code == 1) {
						const newList = res.data.data || [];
						
						if (isLoadMore) {
							this.msgList = [...this.msgList, ...newList];
						} else {
							this.msgList = newList;
						}
						// 判断是否还有更多数据
						this.hasMore = newList.length >= this.limit;
						
						// 如果是下拉刷新，重置分页
						if (!isLoadMore) {
							this.page = 1;
							this.hasMore = newList.length >= this.limit;
						}
					} else {
						uni.showToast({
							title: res.msg || '获取消息失败',
							icon: 'none'
						});
					}
				}).catch((error) => {
					this.loading = false;
					this.refreshing = false;
					uni.stopPullDownRefresh();
					
					// 模拟数据，实际使用时删除
					this.mockData();
				});
			},
			
			// 格式化富文本内容
			formatContent(content) {
				if (!content) return '';
				
				// 处理常见的富文本样式问题
				let formattedContent = content
					// 确保图片自适应
					.replace(/<img/gi, '<img style="max-width:100%;height:auto;"')
					// 处理段落间距
					.replace(/<p/gi, '<p style="margin:10rpx 0;line-height:1.6;"')
					// 处理标题样式
					.replace(/<h[1-6]/gi, (match) => {
						return match + ' style="margin:20rpx 0;font-weight:bold;"';
					})
					// 处理列表样式
					.replace(/<ul/gi, '<ul style="padding-left:40rpx;"')
					.replace(/<ol/gi, '<ol style="padding-left:40rpx;"')
					// 处理链接样式
					.replace(/<a/gi, '<a style="color:#007aff;"');
				
				return formattedContent;
			},
			
			// 模拟数据（实际使用时删除）
			mockData() {
				const mockList = [
					{
						id: 1,
						title: '代理须知',
						content: '<p style="color:#333;line-height:1.6;">尊敬的代理您好，请遵守平台规则，确保业务正常开展。</p><p>如有问题请联系客服。</p>',
						create_time_text: '2025-07-08 02:15:14'
					},
					{
						id: 2,
						title: '系统维护通知',
						content: '<p><strong>系统维护时间：</strong>2025-07-10 02:00-04:00</p><p>维护期间系统将无法使用，请提前安排。</p>',
						create_time_text: '2025-07-07 10:30:00'
					},
					{
						id: 3,
						title: '新功能上线',
						content: '<p>新功能已上线：</p><ul><li>功能一：xxx</li><li>功能二：xxx</li></ul>',
						create_time_text: '2025-07-06 15:45:22'
					}
				];
				
				if (this.page === 1) {
					this.msgList = mockList;
				} else {
					this.msgList = [...this.msgList, ...mockList];
				}
				
				this.hasMore = this.msgList.length < 10; // 模拟数据限制
			},
			
			// 切换选项卡
			switchTab(tab) {
				if (this.activeTab === tab) return;
				
				this.activeTab = tab;
				this.page = 1;
				this.hasMore = true;
				this.msgList = [];
				this.getMsgList();
			},
			
			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				this.page = 1;
				this.hasMore = true;
				this.getMsgList();
			},
			
			// 加载更多
			loadMore() {
				if (!this.hasMore || this.loading) return;
				
				this.page++;
				this.getMsgList(true);
			},
			
			// 查看消息详情
			viewDetail(item) {
				uni.navigateTo({
					url: `/pages/home/msg_detail?id=${item.id}`
				});
			}
		},
		watch: {
			// 监听activeTab变化，重新加载数据
			activeTab() {
				this.getMsgList();
			}
		}
	};
</script>

<style lang="less" scoped>
	.system-msg {
		min-height: 100vh;
		background-color: #f7f8fa;
		display: flex;
		flex-direction: column;
	}
	
	// 选项卡样式
	.tabs {
		display: flex;
		background: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
		position: sticky;
		top: 0;
		z-index: 10;
	}
	
	.tab {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 32rpx;
		color: #666666;
		position: relative;
		transition: all 0.3s;
	}
	
	.tab.active {
		color: #007aff;
		font-weight: bold;
	}
	
	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 6rpx;
		background: #007aff;
		border-radius: 3rpx;
	}
	
	// 消息列表样式
	.msg-list {
		flex: 1;
		height: calc(100vh - 100rpx);
	}
	
	.list-content {
		padding: 20rpx;
	}
	
	.msg-item {
		display: flex;
		background: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		
		&:active {
			background-color: #f9f9f9;
		}
	}
	
	.item-content {
		flex: 1;
	}
	
	.msg-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 15rpx;
		line-height: 1.4;
	}
	
	// 富文本内容样式
	.msg-content {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.6;
		margin-bottom: 15rpx;
		
		// 限制内容显示行数（可选）
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3; // 显示3行
		-webkit-box-orient: vertical;
		
		// 富文本内部元素样式调整
		::v-deep p {
			margin: 10rpx 0;
			line-height: 1.6;
		}
		
		::v-deep img {
			max-width: 100%;
			height: auto;
			border-radius: 8rpx;
			margin: 10rpx 0;
		}
		
		::v-deep ul, ::v-deep ol {
			padding-left: 40rpx;
			margin: 10rpx 0;
		}
		
		::v-deep li {
			margin: 5rpx 0;
		}
		
		::v-deep strong, ::v-deep b {
			font-weight: bold;
			color: #333;
		}
	}
	
	.msg-time {
		font-size: 24rpx;
		color: #999999;
	}
	
	// 空状态样式
	.empty-state {
		padding: 100rpx 0;
	}
	
	// 加载更多样式
	.load-more {
		padding: 30rpx 0;
		text-align: center;
	}
	
	// 没有更多了样式
	.no-more {
		padding: 30rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #999999;
	}
</style>